import type { Metadata } from 'next';
import Link from 'next/link';
import { ComponentGrid } from '@/components/detail/ComponentGrid';
import { ScopeHeader } from '@/components/detail/ScopeHeader';
import { ScopePressureChart } from '@/components/detail/ScopeCharts';
import { LatencyMatrixTable, LinkList, ProbesTable, TargetsTable } from '@/components/detail/Tables';
import { IncidentsSection } from '@/components/incidents/IncidentsSection';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmt, fmtDelta, fmtInt, fmtPct } from '@/lib/format';
import type { CountryDetailResponse, Latency } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ cc: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { cc } = await params;
  const c = await apiTry<CountryDetailResponse>(`/api/v1/pressure/country/${encodeURIComponent(cc.toUpperCase())}`);
  if (!c) return { title: 'Country' };
  return { title: `${c.name} — Internet pressure ${fmt(c.pressure)} (${c.level_label})`, description: `Live Internet pressure observed for ${c.name}: ${fmt(c.pressure)} ${c.level_label}, ${fmtDelta(c.delta_1h)} over 1 h, from ${c.probes.length} probes and ${c.targets.length} anchored targets.`, alternates: { canonical: `/country/${cc.toLowerCase()}` } };
}

export default async function CountryPage({ params }: { params: Params }) {
  const { cc } = await params;
  const [c, latency] = await Promise.all([apiGet<CountryDetailResponse>(`/api/v1/pressure/country/${encodeURIComponent(cc.toUpperCase())}`), apiTry<Latency>('/api/v1/latency')]);
  const first = c.history_24h.points[0]?.pressure;
  const change24 = first != null ? c.pressure - first : null;
  const matrix = (latency?.matrix ?? []).filter((m) => m.from === c.region || m.to === c.region);
  return (
    <div className="pb-8">
      <ScopeHeader
        kicker={
          <>
            Country · region{' '}
            <Link href={`/internet/${c.region}`} className="text-accent hover:underline">
              {c.region}
            </Link>
          </>
        }
        title={c.name}
        subtitle={
          <>
            {c.probes.length} probe{c.probes.length === 1 ? '' : 's'} · {fmtInt(c.targets.length)} anchored targets · role {c.role}
            {!c.coverage_ok && <span className="text-warn"> · weak coverage</span>}
          </>
        }
        pressure={c.pressure}
        level={c.level}
        delta1h={c.delta_1h}
        trend={c.trend}
        meta={
          <>
            <span>
              Δ24h <span className="text-ink">{fmtDelta(change24)}</span>
            </span>
            <span>
              7d median <span className="text-ink">{fmt(c.baseline_7d.median)}</span> · p90 <span className="text-ink">{fmt(c.baseline_7d.p90)}</span>
            </span>
            <span>
              ISO <span className="text-ink">{c.cc}</span>
            </span>
          </>
        }
      />

      <Section label="Components">
        <ComponentGrid components={c.components} />
      </Section>

      <Section label="24 h" right={<span>vs 7-day baseline</span>}>
        <ScopePressureChart series={c.history_24h} baseline={c.baseline_7d} height={240} />
      </Section>

      <Section label="Latency matrix" right={<span>region {c.region} pairs</span>}>
        <LatencyMatrixTable rows={matrix} highlight={c.region} />
      </Section>

      <Section label="Incidents">
        <IncidentsSection incidents={c.incidents} />
      </Section>

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
        <Section label="Affected / observed ASNs" className="min-w-0">
          <LinkList items={c.asns.map((a) => ({ key: String(a.asn), name: a.name, pressure: a.pressure, sub: `AS${a.asn}` }))} hrefFor={(k) => `/asn/${k}`} label="ASNs" />
        </Section>
        <Section label="Services" className="min-w-0">
          <LinkList items={c.services.map((s) => ({ key: s.slug, name: s.name, pressure: s.pressure, sub: `avail ${fmtPct(s.observed_availability_24h, 2)}` }))} hrefFor={(k) => `/service/${k}`} label="services" />
        </Section>
      </div>

      <Section label="Probe coverage">
        <div className="mb-3 grid grid-cols-3 gap-4">
          <Stat label="probes" value={fmtInt(c.probes.length)} />
          <Stat label="targets" value={fmtInt(c.targets.length)} />
          <Stat label="coverage" value={c.coverage_ok ? 'ok' : 'weak'} />
        </div>
        <ProbesTable probes={c.probes} compact />
      </Section>

      <Section label="Targets anchored here" right={<Link href="/targets" className="hover:text-ink">target registry →</Link>}>
        <TargetsTable targets={c.targets} showCategory />
      </Section>
    </div>
  );
}